<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form.studentName"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="form.num"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="form.className"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStudentList">查询</el-button>
        <el-button type="primary" @click="adddialogVisible = true">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="studentId" label="编号" width="180"> </el-table-column>
      <el-table-column prop="studentName" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="num" label="学号"> </el-table-column>
      <el-table-column prop="className" label="班级"> </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="openStudent(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="delStudent(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加学生 -->
    <el-dialog title="添加学生" :visible.sync="adddialogVisible" width="30%">
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="addForm.studentName"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="addForm.num"></el-input> 
        </el-form-item>
       <el-form-item label="班级" prop="className">
          <el-select
            v-model="addForm.classId"
            @change="handleClassChange"
            filterable
            remote
            reserve-keyword
            placeholder="请输入学生班级"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>  
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onclickAddStudent">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑学生 -->
    <el-dialog title="编辑学生" :visible.sync="editdialogVisible" width="30%">
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="editForm.studentName"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="editForm.num"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-select
            v-model="editForm.classId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入学生班级"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editStudent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getStudentList ,addStudent,editStudent,delStudent} from "@/api/student.js";
import { getClassList } from "@/api/class.js";


export default {
  data() {
    return {
      classList:[],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {
        studentName: "",
        num: "",
        className:"",
        classId:""
      },
      addForm: {
        studentName: "",
        num: "",
        className:"",
        classId:""
      },
      editForm:{
        studentId:undefined,
        studentName: "",
        num: "",
        className:"",
        classId:""
      },
      adddialogVisible: false,
      editdialogVisible: false,
      options: [],
      value: [],
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.getClassList();
    this.getStudentList();
  },
  methods: {
    // 添加学生方法
    onclickAddStudent() {
      addStudent({
        ...this.addForm,
      }).then((res) => {
        console.log(res);
        this.getStudentList();
        this.adddialogVisible = false;
        this.addForm ={
        studentName: "",
        num: "",
        className:"",
        classId:""
      }
      this.$message.success("添加成功！");
      }).catch(error => {
        this.$message.error("添加失败！"+error.message);
      });

      
    },
    getStudentList() {
      getStudentList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form,
      }).then((res) => {
        console.log(res);
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getStudentList();
    },
    delStudent(row) {  
  delStudent({ studentId: row.studentId })  
    .then(res => {  
      this.$message({  
        showClose: true,  
        message: "删除成功",  
        type: 'success'  // 修正为字符串  
      });  
      this.getStudentList();  
    })  
    .catch(error => {  
      this.$message.error("删除失败");  
    });  
},  

    // openStudent(row){
    //   this.editdialogVisible=true;
    //   this.editForm={...row};
    // },
    openStudent(row) {
      console.log('当前行数据:', row);
      this.editForm = {
        studentId: row.studentId,                
        studentName: row.studentName,     
        num: row.num,
        classId: row.classId       
      };
      this.editdialogVisible = true;
    },
    editStudent(){
      console.log('提交的数据:', this.editForm);
      editStudent(this.editForm).then(res =>{      
        console.log(res);
        this.getStudentList();
        this.editdialogVisible=false;
        this.editForm = {
          studentId:undefined,
          studentName:"",
          num:"",
          className:"",
          classId:""
        }
        this.$message.success("编辑成功！");
        }).catch( error => {
          this.$message.error("编辑失败！");
        })
    },
    remoteMethod(query) {
      this.getClassList(query);
    },
    getClassList(query) {
      getClassList({ name: query }).then((res) => {
        this.classList = res.rows;
        console.log(this.classList);
      });
    },
    handleClassChange(classId) {
    const selectedClass = this.classList.find(item => item.id === classId);
    if (selectedClass) {
      this.addForm.className = selectedClass.name;  // 更新 className
    }
  },
  },
};
</script>

<style lang="scss" scoped>
/* 整体容器样式 */
.demo-form-inline {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;

  .el-form-item {
    margin-bottom: 0;
    margin-right: 30px;
  }
}

/* 表格样式 */
.el-table {
  margin: 20px 0;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

  &::before {
    height: 0; /* 去除默认底部边框 */
  }

  .el-table__header th {
    background-color: #409eff;
    color: white;
    font-weight: bold;
  }

  .el-button--text {
    color: #606266;
    transition: color 0.3s;

    &:hover {
      color: #409eff;
    }

    &:last-child {
      color: #f56c6c;
      &:hover {
        color: #ff7878;
      }
    }
  }
}

/* 对话框样式 */
.el-dialog {
  border-radius: 8px;

  &__header {
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    
    span {
      font-weight: 600;
      color: #303133;
    }
  }

  .el-form {
    padding: 20px 30px;
    
    .el-form-item {
      margin-bottom: 22px;
      
      .el-select {
        width: 100%;
      }
    }
  }

  &__footer {
    border-top: 1px solid #ebeef5;
    padding: 15px 20px;
    text-align: right;
  }
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
}

/* 操作按钮统一样式 */
.el-button {
  transition: all 0.3s;
  
  &--primary {
    background: #409eff;
    border-color: #409eff;
    
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
    }
  }
}

/* 输入框聚焦效果 */
.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64,158,255,.3);
}

/* 下拉菜单样式 */
.el-select-dropdown {
  .el-popper {
    margin-top: 5px;
  }
  
  .el-select-dropdown__item {
    padding: 0 20px;
  }
}
</style>